<template>
  <div
    ref="deviceImage"
    class="image-container"
    @mousedown="onMouseDown"
    @mouseup="onMouseUp"
    @mousemove="onMouseMove"
  >
    <img class="device" :src="device" />

    <template v-if="!editorMode">
      <img
        class="mic alpha-anim"
        :class="marker.status"
        :src="iconsMap[marker.url]"
        @click.stop="handleClick(marker)"
        v-for="marker in markers"
        :title="'CH_'+marker.channel"
        :key="marker.id"
        :style="{
          left: marker.x,
          top: marker.y,
        }"
      />
    </template>
    <template v-else>
      <img
        class="mic2 alpha-anim"
        :src="iconsMap[marker.url]"
        :class="marker.status"
        v-for="marker in markers"
        :key="marker.id"
        :title="'CH_'+marker.channel"
        :style="{
          width: imgSize + 'px',
          height: imgSize + 'px',
          left: marker.x,
          top: marker.y,
        }"
      />
    </template>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    editorMode: {
      // 是否编辑模式，编辑模式下，推送鼠标拖动事件。无法点击mic
      type: Boolean,
      default: false
    },
    imageData: {
      type: String,
      default: ''
    },
    markers: {
      type: Array
    }
  },
  watch: {
    imageData (value) {
      this.imageData = value
      this.device = this.imageData
    },
    markers (values) {
      this.mMarkers = values
    }
  },
  data () {
    return {
      isDragging: false,
      domWidth: 0,
      domHeight: 0,
      imgSize: 50,
      mMarkers: [],
      device: this.imageData,
      iconsMap: {
        'mic-idle': require('@/assets/sensorImg/pickup.png'),
        'mic-normal': require('@/assets/sensorImg/pickup_normally.png'),
        'mic-warn': require('@/assets/sensorImg/pickup_error2.png'),
        'mic-error': require('@/assets/sensorImg/pickup_error.png'),
        'mic-offline': require('@/assets/sensorImg/pickup_offline.png'),
        'mic-dip': require('@/assets/sensorImg/pickup_dip.png'),
        'mic-sonic-source': require('@/assets/sensorImg/pickup_sonic_source.png')
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      const { clientWidth, clientHeight } = this.$refs.deviceImage
      this.domWidth = clientWidth
      this.domHeight = clientHeight
      this.imgSize = this.domWidth / 820 * 50
    })
  },
  methods: {
    handleClick (marker) {
      this.$emit('onMicClick', marker)
    },
    onMouseMove (ev) {
      // console.log("movemovemove");
      if (!this.editorMode) return
      const { offsetX, offsetY } = ev
      if (!this.isDragging) return
      this.$emit('onEditorTouch', {
        x: `${((offsetX / this.domWidth - 25 / this.domWidth) * 100).toFixed(2)}%`,
        y: `${((offsetY / this.domHeight - 25 / this.domHeight) * 100).toFixed(2)}%`
      })
    },
    onMouseUp (ev) {
      if (!this.editorMode) return
      this.isDragging = false
      this.$emit('onMouseUp')
    },
    onMouseDown (ev) {
      if (!this.editorMode) return
      this.isDragging = true
      const { offsetX, offsetY } = ev
      this.$emit('onEditorTouch', {
        x: `${((offsetX / this.domWidth - 25 / this.domWidth) * 100).toFixed(2)}%`,
        y: `${((offsetY / this.domHeight - 25 / this.domHeight) * 100).toFixed(2)}%`
      })
    }
  }
}
</script>

<style scoped>
  .alpha-anim.selected{
    border: 3px solid green;
  }
  .image-container {
    width: 100%;
    height: 100%;
    position: relative;
    user-select: none;
  }
  .image-container > img.device {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  .image-container > img.mic,
  .image-container > img.mic2 {
    width: 50px;
    height: 50px;
    position: absolute;
    object-fit: contain;
    transition-property: height, width, translateX, translateY;
    transition-duration: 0.4s;
  }
  .image-container > img.mic2 {
    pointer-events: none;
  }

  .image-container > img.mic:hover {
    width: 55px;
    height: 55px;
    transform: translateX(-5px) translateY(-5px);
  }

  .alpha-anim {
    animation-name: alphaAnimation;
    animation-duration: 1500ms;
    animation-fill-mode: both;
    animation-direction: reverse;
    animation-iteration-count: infinite;
  }

  @keyframes alphaAnimation {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
</style>
